<template>
  <div class="flow">
    <div class="formLook">
      <TitleComponent title="入职管理查看" />
      <div class="container">
        <el-form
          ref="formRef"
          :model="form"
          label-width="120px"
          size="small"
          style="margin-top: 20px"
        >
          <!-- 员工账号和工号 -->
          <el-row :gutter="20">
            <div class="avatar-container">
              <ImageComponent
                :src="form.personPhoto"
                width="100px"
                height="100px"
                borderRadius="6px"
              />
            </div>
          </el-row>
          <el-row :gutter="20">
            <!-- xs:100% sm:50% md:33% lg:25% -->
            <el-col :xs="24" :sm="12" :md="12" :lg="6">
              <InfoItem label="员工账号：" :value="form.userName" />
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6">
              <InfoItem label="工号：" :value="form.jobNumber" />
            </el-col>
          </el-row>

          <!-- 基本信息 -->
          <div class="section-title">
            <span>基本信息</span>
          </div>

          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <InfoItem label="姓名：" :value="form.name" />
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <InfoItem label="性别：" :value="form.sex" />
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <InfoItem label="联系电话：" :value="form.phoneNumber" />
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <InfoItem label="工作邮箱：" :value="form.mail" />
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <InfoItem
                label="岗位名称："
                :value="form.applicationPositonName"
              />
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <InfoItem label="岗位性质：" :value="form.jobNature" />
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <InfoItem label="部门：" :value="form.deptName" />
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <InfoItem label="职级：" :value="form.positionLevel" />
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="12" :lg="6">
              <InfoItem label="直属领导：" :value="form.directLeaderName" />
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6">
              <InfoItem label="最高领导：" :value="form.supremeLeaderName" />
            </el-col>
          </el-row>

          <!-- 工作信息 -->
          <div class="section-title">
            <span>工作信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="8" :lg="8">
              <InfoItem label="入职类型：" :value="form.joinType" />
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8">
              <InfoItem label="入职日期：" :value="form.joinTime" />
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8">
              <InfoItem label="应聘渠道：" :value="form.applicationSource" />
            </el-col>
          </el-row>

          <!-- 薪资信息 -->
          <div class="section-title">
            <span>薪资信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="12" :lg="8">
              <InfoItem label="薪资标准：" :value="form.salaryScale" />
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8">
              <InfoItem label="其他补贴：" :value="form.otherSubsidy" />
            </el-col>
          </el-row>

          <!-- 其他信息 -->
          <div class="section-title">
            <span>其他信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="24">
              <InfoItem label="备注：" :value="form.remark" />
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <!-- <el-col :span="24">
              <UploadAttachment
                :file-list="form.attachments"
                @preview="handlePreview"
                @remove="handleRemove"
              />
            </el-col> -->
            <!-- <el-form-item label="体检报告：">
              <attachment
                v-if="
                  form.physicalExaminationReport &&
                  form.physicalExaminationReport != null
                "
                :employeeResignFileVoList="form.physicalExaminationReport"
              >
              </attachment>
            </el-form-item> -->
            <!-- 循环渲染所有附件字段 -->
          </el-row>
          <div class="section-title">
            <span>入职材料</span>
          </div>

          <el-row :gutter="20">
            <el-col :span="24">
              <template v-for="item in attachmentItems" :key="item.field">
                <el-form-item :label="`${item.label}：`">
                  <attachment
                    v-if="form[item.field] && form[item.field] != null"
                    :employeeResignFileVoList="
                      form[item.field] ? form[item.field] : [form[item.field]]
                    "
                  />
                </el-form-item>
              </template>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import InfoItem from "@/components/InfoItem/index.vue";
import TitleComponent from "@/components/TitleComponent.vue";
import { onboardingInfo } from "@/api/employeeRelations/onboarding.js";
import { seachPersonList } from "@/api/recruitment/needWorkers/index.js";
import { searchDepyList } from "@/api/recruitment/jobApplication/index.js";
import ImageComponent from "@/components/ImageComponent.vue";
import { useRoute, useRouter } from "vue-router";

import attachment from "@/components/attachment.vue";
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

const formSize = ref("default");
// 附件项配置
const attachmentItems = [
  { label: "体检报告", field: "physicalExaminationReport" },
  { label: "离职证明", field: "resignationCertificate" },
  { label: "入职声明", field: "employmentStatement" },
  { label: "学位学历证书", field: "academicQualificationCertificate" },
  { label: "特殊岗位资格证明", field: "qualificationCertificate" },
  { label: "职业技能等级证书", field: "skillCertificate" },
  { label: "就业许可手续", field: "employmentPermit" },
];

// 人员+部门
const leaderOptions = reactive([]);
const buIdOptions = reactive([]);
const joinTypeMap = {
  0: "社会招聘",
  1: "应届生",
  2: "实习生",
};
const positionLevelMap = {
  0: "初级",
  1: "中级",
  2: "高级",
};
const form = reactive({
  /** 姓名 */
  name: "",

  /** 性别 */
  sex: "",

  /** 联系电话 */
  phoneNumber: "",

  /** 邮箱 */
  mail: "",

  /** 员工账号 */
  userName: "",

  /** 工号 */
  jobNumber: "",

  /** 任职部门id */
  deptId: "",

  /** 任职部门名称 */
  deptName: "",

  /** 职级 */
  positionLevel: "",

  /** 岗位名称 */
  applicationPositonName: "",

  /** 岗位性质 */
  jobNature: "",

  /** 直属领导id */
  directLeaderId: "",

  /** 直属领导名称 */
  directLeaderName: "",

  /** 最高领导id */
  supremeLeaderId: "",

  /** 最高领导名称 */
  supremeLeaderName: "",

  /** 入职类型 */
  joinType: "",

  /** 社保方案 */
  socialSecurityScheme: "",

  /** 应聘渠道 */
  applicationSource: "",

  /** 薪资标准 */
  salaryScale: "",

  /** 其他补贴 */
  otherSubsidy: "",

  /** 备注 */
  remark: "",

  /** 附件 */
  file: "",

  /** 入职日期 */
  joinTime: "",
  cancelReason: "",
  physicalExaminationReport: "",
  resignationCertificate: null,
  employmentStatement: null,
  academicQualificationCertificate: null,
  qualificationCertificate: null,
  skillCertificate: null,
  employmentPermit: null,
});

onMounted(async () => {
  await seachPersonsList();
  await getDemandDetailsList();
  if (route.query.id) {
    await getOnboadingInfo(route.query.id);
  }
});
const seachPersonsList = async () => {
  // BMLD
  const res2 = await seachPersonList({
    roleKey: "",
  });
  if (res2.rows.length > 0) {
    res2.rows.map((item) => {
      let label = item.userName;
      let value = item.userId;
      leaderOptions.push({
        label,
        value,
      });
    });
  }
};
const getDemandDetailsList = async () => {
  // 搜索部门
  const { data } = await searchDepyList();
  console.log(data, "12323");
  if (data.length > 0) {
    data.map((item) => {
      let label = item.deptName;
      let value = item.deptId;
      buIdOptions.push({
        label,
        value,
      });
    });
  }
};
// 回显 人员+部门
const findLabelByValue = (options, value) => {
  const item = options.find((item) => item.value === value);
  return item ? item.label : "";
};
const getOnboadingInfo = async (id) => {
  const res = await onboardingInfo(id);
  if (res.data) {
    Object.keys(res.data).forEach((item) => {
      if (res.data[item]) {
        form[item] = res.data[item];
        form.sex = res.data.sex;
      }
    });
    // 部门
    if (!res.data.deptName) {
      form.deptName = findLabelByValue(buIdOptions, res.data.deptId);
    }
    // 直属领导
    if (res.data.directLeaderId) {
      form.directLeaderName = findLabelByValue(
        leaderOptions,
        res.data.directLeaderId
      );
    }
    // 最该领导
    if (res.data.supremeLeaderId) {
      form.supremeLeaderName = findLabelByValue(
        leaderOptions,
        res.data.supremeLeaderId
      );
    }
    // 入职类型
    if (res.data.joinType != undefined) {
      form.joinType = joinTypeMap[res.data.joinType] || "";
    }
    // 职级
    if (res.data.positionLevel != undefined) {
      form.positionLevel = positionLevelMap[res.data.positionLevel] || "";
    }
  }
};
</script>

<style scoped>
.container {
  margin: 0 auto;
  padding: 0 20px;
  background-color: #fff;
  border-radius: 8px;
  box-sizing: border-box;
}

/* 响应式布局调整 */
@media (max-width: 768px) {
  .container {
    padding: 0 10px;
  }

  :deep(.el-form-item__label) {
    font-size: 14px;
  }

  .section-title {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .avatar-container {
    text-align: center;
    margin-right: 0;
    margin-bottom: 15px;
  }
}

.el-row {
  margin-bottom: 15px;

  &:last-child {
    margin-bottom: 0;
  }
}

:deep(.el-form-item) {
  margin-bottom: 12px;

  &__content {
    word-break: break-word;
    min-height: 22px;
  }
}

.section-title {
  font-size: 15px;
  font-weight: bold;
  margin: 20px 0 15px;
  padding-left: 10px;
  border-left: 3px solid #409eff;
  color: #16191d;
}

/* 移动端适配 */
/* @media (max-width: 576px) {
  :deep(.el-form-item__label) {
    width: 100% !important;
    text-align: left;
    margin-bottom: 5px;
  }
  
  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
  
  .el-col {
    margin-bottom: 8px;
  }
} */
</style>
